<template>
  <div class="mod-coupon">
    <!-- 第一部分 -->
    <div class="one">
      <!-- 栏目标题行 -->
      <div class="title-line">
        <!-- 左边 -->
        <div class="title-left">
          <p class="blue-vertical" />
          <span class="title-txt">{{ $t('dataAnalysis.keyCoupon') }}</span>
        </div>
      </div>

      <!-- 第一部分指标表 -->
      <div class="one-table">
        <el-row>
          <el-col :span="12">
            <div class="grid-content dotted">
              <div class="number">
                {{ yesterdayGetTimes }}
              </div>
              <div>{{ $t('dataAnalysis.receiveTimes') }}</div>
            </div>
          </el-col>

          <el-col :span="12">
            <div class="grid-content dotted">
              <div class="number">
                {{ yesterdayUseTimes }}
              </div>
              <div>{{ $t('dataAnalysis.miniMallUsedTimes') }}</div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <!-- 第二部分 -->
    <div class="one">
      <!-- 栏目标题行 -->
      <div class="title-line">
        <!-- 左边 -->
        <div class="title-left">
          <p class="blue-vertical" />
          <span class="title-txt">{{ $t('dataAnalysis.couponTrendChart') }}</span>
        </div>
      </div>

      <!-- 指标表 -->
      <div
        id="div-conpon-chart"
        class="two-table"
      >
        <!-- 图表 -->
        <common-chart
          v-if="couponChart.show"
          :options="couponChart.options"
          style="width:800px; height:300px;"
        />
        <!-- /图表 -->
      </div>
    </div>

    <!-- 第三部分 -->
    <div class="one">
      <!-- 栏目标题行 -->
      <div class="title-line">
        <!-- 左边 -->
        <div class="title-left">
          <p class="blue-vertical" />
          <span class="title-txt">{{ $t('dataAnalysis.detailedData') }}</span>
        </div>
      </div>

      <!-- 指标表 -->
      <div class="three-table">
        <el-table
          :data="tableData"
          style="width: 100%"
        >
          <el-table-column
            prop="currentDay"
            :label="$t('dataAnalysis.date')"
          />
          <el-table-column
            prop="takeNum"
            :label="$t('dataAnalysis.receiveTimes')"
          />
          <el-table-column
            prop="useNum"
            :label="$t('dataAnalysis.miniMallUsedTimes')"
          />
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup>
import moment from 'moment'
const yesterdayGetTimes = ref(0)
const yesterdayUseTimes = ref(0)
let dateArr = [] // 趋势图时间数组s
let seriesDataArr = [] // 所有数据
const tableData = ref([])// 第三部分
let dateRangeParam = []
const onGetCouponAnalysis = () => {
  http({
    url: http.adornUrl('/admin/prodAnalysis/getCouponAnalysis'),
    method: 'get',
    params: http.adornParams(
      {
        dateType: 2,
        startTime: dateRangeParam[0],
        endTime: dateRangeParam[1]
      }
    )
  }).then(({ data }) => {
    if (data) {
      tableData.value = data
      const da = data[data.length - 1]
      dateArr = []
      seriesDataArr = []
      const obj1 = initObj($t('dataAnalysis.receiveTimes'))
      const obj2 = initObj($t('dataAnalysis.miniMallUsedTimes'))
      data.forEach(i => {
        dateArr.push(i.currentDay)
        obj1.data.push(i.takeNum)
        obj2.data.push(i.useNum)
      })
      seriesDataArr.push(obj1)
      seriesDataArr.push(obj2)
      yesterdayGetTimes.value = da.takeNum
      yesterdayUseTimes.value = da.useNum
      onGetCouponChart()
    }
  })
}

const couponChart = reactive({
  options: {},
  show: false
})
const onGetCouponChart = () => {
  couponChart.options = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: [$t('dataAnalysis.receiveTimes'), $t('dataAnalysis.miniMallUsedTimes')]
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: dateArr,
      axisLine: {
        lineStyle: {
          color: '#999'
        }
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      axisLine: { show: false },
      axisTick: { show: false }
    },
    series: seriesDataArr
  }
  couponChart.show = true
}
/**
 * 2: 近七天 3:近30天 5:自然月(前一个月如当前月为7月，自然月为6月)
 */
const onSetDateRange = (val) => {
  let startDay = null
  let endDay = null
  if (val === 2) {
    startDay = -7
    endDay = -1
  } else if (val === 3) {
    startDay = -30
    endDay = -1
  } else {
    return
  }
  // 开始时间
  const startTime = moment().add(startDay, 'days').startOf('days')
  // 结束时间
  const endTime = moment().add(endDay, 'days').endOf('days')
  dateRangeParam = [startTime.format('LL'), endTime.format('LL')]
  onGetCouponAnalysis()
}
onMounted(() => {
  onSetDateRange(2)
})
/**
 * 初始化一个obj
 */
const initObj = (name) => {
  const obj = {}
  obj.name = name
  obj.type = 'line'
  obj.stack = $t('home.totals')
  obj.smooth = true
  obj.data = []
  return obj
}

</script>

<style lang="scss" scoped>
.mod-coupon {
  // 栏目标题行
  .title-line {
    background: #f8f8f8;
    padding: 12px;
    display: flex;
    margin: 20px 0;
  }
  .mod-home .blue-vertical {
    height: 1.5em;
  }
  .title-left {
    display: flex;
    align-items: center;
  }
  .one .one-table {
    height: 100px;
    width: 98%;
    border: 1px solid #e0dfdf;
    margin: 0 10px;
  }
  //第一部分表格
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    padding: 20px;
    text-align: center;
  }
  .grid-content div {
    padding: 8px;
    font-size: 14px;
  }
  .dotted div {
    border-right: #8f8e8e dotted 1px;
  }
  .grid-content .number {
    font-weight: bold;
  }

  // 第二部分
  .two-table {
    padding-top: 20px;
    margin-bottom: 40px;
    width: 100%;
  }

  // 第三部分
  .three-table {
    margin: 20px 0;
  }
}
</style>
